<template>
	<view class="content">

		<!-- 发货/收货部分 -->
		<view class="item_div">
			<!-- 发货 -->
			<view style="display: flex;align-items: center;justify-content:space-between;height: 60rpx;margin: 12rpx 0 0 0;" @click.stop="onSelAddr(1)">
				<view style="display: flex;">
					<view class="tag" style="background-color: #ffd30d;">发</view>
					<view style="padding: 0 24rpx 0 24rpx;font-weight: bold;font-size: 30rpx;">{{from_addr.name || '请选择发货地址'}}</view>
					<view style="font-weight: bold;font-size: 30rpx;">{{from_addr.mobile}}</view>
				</view>
				<view>></view>
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 12rpx 0 0 0;"></view>

			<!-- 收货 -->
			<view style="display: flex;align-items: center;justify-content:space-between;height:60rpx;margin: 24rpx 0 0 0;" @click.stop="onSelAddr(2)">
				<view style="display: flex;">
					<view class="tag" style="background-color: #aaa;">收</view>
					<view style="padding: 0 24rpx 0 24rpx;font-weight: bold;font-size: 30rpx;">{{to_addr.name || '请选择收货地址'}}</view>
					<view style="font-weight: bold;font-size: 30rpx;">{{to_addr.mobile}}</view>
				</view>
				<view>></view>
			</view>

			<!-- 物流 -->
			<view style="display: flex;align-items: center;justify-content:space-between;height:60rpx;margin: 24rpx 0 0 0;" @click.stop="onSelCom(1)">
				<view style="display: flex;">
					<view class="tag" style="background-color: deepskyblue;">运</view>
					<view style="padding: 0 24rpx 0 24rpx;font-weight: bold;font-size: 30rpx;">{{log_com.company_name || '请选择物流公司'}}</view>
					<!-- <view style="padding: 0 24rpx 0 24rpx;font-weight: bold;font-size: 30rpx;visibility:hidden;">空</view> -->
				</view>
				<view>></view>
			</view>

		</view>

		<!-- 货物信息 交货/配送方式  -->
		<view class="item_div">

			<view class="item_sub_div">
				<view class="item_sub_txt">货物名称</view>
				<input class="et_sub_txt" placeholder="请输入货物名称" maxlength="24" @input="onInputGoodsName" :value="goods.goods_name" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">货物数量(件)</view>
				<input class="et_sub_txt" placeholder="请输入货物数量" type="digit" maxlength="8" @input="onInputGoodsNum" :value="goods.goods_num" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">货物重量(吨)</view>
				<input class="et_sub_txt" placeholder="请输入货物重量" type="digit" maxlength="8" @input="onInputGoodsWeight" :value="goods.goods_weight" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">货物体积(方)</view>
				<input class="et_sub_txt" placeholder="请输入货物体积" type="digit" maxlength="8" @input="onInputGoodsVolume" :value="goods.goods_volume" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

		</view>

		<!-- 交货/配送方式  -->
		<view class="item_div">

			<view class="item_txt_div">
				<view class="item_txt">交货方式</view>
				<view class="type_div">
					<view :class="info.pickup == 1 ? 'btn_type_sel' : 'btn_type'" @click.stop="onJhType(1)">上门提货</view>
					<view :class="info.pickup == 2 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onJhType(2)">自送专线</view>
				</view>
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 12rpx 0 0 0;"></view>

			<view class="item_txt_div">
				<view class="item_txt">配送方式</view>
				<view class="type_div">
					<view :class="info.handover == 1 ? 'btn_type_sel' : 'btn_type'" @click.stop="onPsType(1)">用户自提</view>
					<view :class="info.handover == 2 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onPsType(2)">送货上门</view>
				</view>
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 12rpx 0 0 0;"></view>

			<view class="item_txt_div">
				<view class="item_txt">支付方式</view>
				<view class="type_div">
					<view :class="info.pay_kind == 1 ? 'btn_type_sel' : 'btn_type'" @click.stop="onPayType(1)">现付</view>
					<view :class="info.pay_kind == 2 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onPayType(2)">提付</view>
					<view :class="info.pay_kind == 3 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onPayType(3)">回单付</view>
				</view>
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 12rpx 0 0 0;"></view>

			<view class="item_txt_div">
				<view class="item_txt">是否开票</view>
				<view class="type_div">
					<view :class="info.kaipiao == 1 ? 'btn_type_sel' : 'btn_type'" @click.stop="onKpType(1)">是</view>
					<view :class="info.kaipiao == 0 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onKpType(0)">否</view>
				</view>
			</view>

		</view>

		<view class="item_div">
			<view class="item_txt_div">
				<view class="item_txt">是否回单</view>
				<view class="type_div">
					<view :class="info.huidan == 1 ? 'btn_type_sel' : 'btn_type'" @click.stop="onHdType(1)">是</view>
					<view :class="info.huidan == 0 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onHdType(0)">否</view>
				</view>
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">回单数量</view>
				<input class="et_sub_txt" placeholder="请输入回单数量" type="number" maxlength="8" @input="onInputHuidanNum" :value="info.huidan_num" />
			</view>
		</view>

		<!-- <view class="clear_all" @click="onClearAll">清空当前信息</view> -->

		<!-- 确定 -->
		<view class="btn_ok" @click="onOk">确定</view>

	</view>
</template>

<script>
	import { getUInfo, } from '@/util/util.js'
	export default {
		data() {
			return {
				from_addr: {}, // 选择的发货地址
				to_addr: {}, // 选择的收货地址
				log_com: {}, // 选择的物流公司
				// 货物信息
				goods: {
					goods_name: '',
					goods_num: '',
					goods_weight: '',
					goods_volume: '',
				},
				info: {
					company_id: '', // 物流id
					sender_id: '', // 发货地址id
					receiver_id: '', // 收货地址id
					pickup: 2, // 取货方式 1专线 2 自送
					handover: 1, // 配送方式 1 自提 2 送货
					pay_kind: 2, // 支付方式 1 现付 2 到付 3? 回单付?
					kaipiao: 0, // 是否开票
					huidan: 0, // 是否回单
					huidan_num: 0, //回单数量
				},
			}
		},

		onLoad(opts) {
			// 选择地址
			uni.$on('onSelAddr', (data) => {
				// console.log('监听到onSelAddr，参数=' + JSON.stringify(data));
				if (data.type == '1') {
					this.from_addr = data.msg
					this.info.sender_id = this.from_addr.id
				}
				if (data.type == '2') {
					this.to_addr = data.msg
					this.info.receiver_id = this.to_addr.id
				}
				if (this.from_addr.name == this.to_addr.name && this.from_addr.address == this.to_addr.address) {
					this.to_addr = {}
					setTimeout(() => { uni.showToast({ icon: 'none', title: '收发地址不能相同', duration: 3000 }) }, 200)
				}
			})
			// 选择物流公司
			uni.$on('onSelCom', (data) => {
				// console.log('监听到onSelCom，参数=' + JSON.stringify(data));
				this.log_com = data.msg
				this.info.company_id = this.log_com.id
			})
		},

		methods: {

			// 选择是否回单
			onHdType(type) {
				this.info.huidan = type
			},
			// 选择是否开票
			onKpType(type) {
				this.info.kaipiao = type
			},
			// 选择支付方式
			onPayType(type) {
				this.info.pay_kind = type
			},
			// 选择配送方式
			onPsType(type) {
				this.info.handover = type
			},
			// 选择交货方式
			onJhType(type) {
				this.info.pickup = type
			},

			// 输入回单数量
			onInputHuidanNum(e) {
				this.info.huidan_num = e.detail.value
			},
			// 输入体积
			onInputGoodsVolume(e) {
				this.goods.goods_volume = e.detail.value
			},
			// 输入重量
			onInputGoodsWeight(e) {
				this.goods.goods_weight = e.detail.value
			},
			// 输入数量
			onInputGoodsNum(e) {
				this.goods.goods_num = e.detail.value
			},
			// 输入名称
			onInputGoodsName(e) {
				this.goods.goods_name = e.detail.value
			},

			// 选择物流公司
			onSelCom(type) {
				uni.navigateTo({ url: `/pages/delivery/com_list?from=delivery&type=${type}` })
			},
			// 选择地址
			onSelAddr(type) {
				uni.navigateTo({ url: `/pages/mine/address_list?from=delivery&type=${type}` })
			},

			// 确定
			onOk() {
				let that = this
				if (!this.info.sender_id) {
					uni.showToast({ icon: 'none', title: '请选择发货地址' })
					return
				}
				if (!this.info.receiver_id) {
					uni.showToast({ icon: 'none', title: '请选择收货地址' })
					return
				}
				if (!this.info.company_id) {
					uni.showToast({ icon: 'none', title: '请选择物流公司' })
					return
				}
				if (!this.goods.goods_name) {
					uni.showToast({ icon: 'none', title: '请输入货物名称' })
					return
				}
				if (!this.goods.goods_num) {
					uni.showToast({ icon: 'none', title: '请输入货物数量' })
					return
				}
				if (!this.goods.goods_weight) {
					uni.showToast({ icon: 'none', title: '请输入货物重量' })
					return
				}
				if (!this.goods.goods_volume) {
					uni.showToast({ icon: 'none', title: '请输入货物体积' })
					return
				}

				let newObj = {
					...this.info,
					goods: JSON.stringify([this.goods])
				}
				console.log('准备提交的数据 = ', newObj);
				uni.showModal({ title: '提示', content: '是否提交发货信息？', success: (res) => { res.confirm && that.createOrder(newObj) } })
			},

			// 接口:提交发货
			async createOrder(newObj) {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$createOrder({ token, ...newObj })
				if (res.code == 1) {
					// uni.showModal({ title: '提示', content: `${res.msg}`, showCancel: false, success: (res) => { res.confirm && uni.navigateBack() } })
					uni.showModal({ title: '提示', content: `${res.msg}`, showCancel: false, success: (res) => {} })
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 清空所有
			onClearAll() {
				uni.showModal({
					title: '提示',
					content: '是否清空当前信息？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({ icon: 'none', title: '已清空' })
						}
					}
				})
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #F8F8F8;
	}

	.item_div {
		display: flex;
		flex-direction: column;
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.tag {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 22rpx;
		text-align: center;
		color: white;
		border-radius: 8rpx;
	}

	.item_txt_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 98rpx;
	}

	.item_txt {
		font-size: 28rpx;
		font-weight: bold;
		margin: 12rpx 0 0 0;
	}

	.item_sub_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 98rpx;
		margin: 12rpx 0 0 0;
		/* background-color: red; */
	}

	.item_sub_txt {
		font-size: 28rpx;
		font-weight: bold;
		margin: 0rpx 0 0 0rpx;
	}

	.et_sub_txt {
		width: 60%;
		height: 100%;
		text-align: right;
		/* background-color: red; */
	}

	.type_div {
		display: flex;
		align-items: center;
	}

	.btn_type {
		border-radius: 8rpx;
		padding: 8rpx 16rpx 8rpx 16rpx;
		font-weight: bold;
		color: #000;
		background-color: #F7F7F7;
	}

	.btn_type_sel {
		border-radius: 8rpx;
		padding: 8rpx 16rpx 8rpx 16rpx;
		font-weight: bold;
		color: #EE733A;
		background-color: #FCEFE6;
	}

	.clear_all {
		text-align: right;
		padding: 24rpx 24rpx 24rpx 0;
		font-size: 24rpx;
		color: #DC6D45;
	}

	.btn_ok {
		align-self: center;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		background: #F7D34B;
		border-radius: 16rpx;
		margin: 36rpx 0 48rpx 0;
	}
</style>